<template>
  <div class="amap-page-container" style="height: 850px;width: 100%;padding: 0px !important;">
   <el-amap-search-box class="search-box"
                        :search-option="searchOption"
                        :on-search-result="onSearchResult"></el-amap-search-box>
    <!-- 地图 -->
    <el-amap ref="map" vid="amap" :zoom="zoom" :events="events" :plugin="plugin"></el-amap>
  </div>
</template>
<script>
import { lazyAMapApiLoaderInstance } from "vue-amap";
export default {
  name: "index",
  props: {
    position: {
      type: Array,
      default: function() { 
        return [113.138919, 27.831329];
      }
    },
    center: {
      type: Array,
      default: function () {
        return [113.138919, 27.831329];
      }
    },
    radius: {
      type: Number,
      default: 100
    }
  },
  data() {
    let self = this
    return {
      map: null,
      zoom: 16,
      toSearch: true,
      markers:[],//标记点集合
      windows:[],//信息窗口集合
      events: {
        init(o) {
          // ... 初始地图的一些操作
        },
        complete() {
          // ... 地图渲染完成后的一些操作
        }
      },
      searchOption: {
        // 设置搜索城市，默认为全国  city: '北京',
        citylimit: false // 是否限制在城市范围内搜索
      },
      plugin: [
        {
          pName: 'ToolBar',//放大缩小工具
          events: {
            init(instance) {
            }
          }
        },
        {
          pName: 'Scale',//比例尺
          events: {
            init(instance) {
            }
          }
        },
        {
          pName: 'Geolocation',
          events: {
            init(o) {
              // o 是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  self.lng = result.position.lng
                  self.lat = result.position.lat
                  self.center = [self.lng, self.lat]
                  self.address = result.formattedAddress
                  self.loaded = true
                  self.$nextTick()
                }
              })
            }
          }
        }
      ],
      address: '',
      searchResults: [], // 存储搜索结果
      dialogVisible: false // 控制弹出框显示
    }
  },
  watch: {
    radius(newVal) {
      this.map.clearMap();
      this.addMarker();
      this.addCircle();
    }
  },
  mounted() {
    this.loadMap();
  },
  created() {

  },
  methods: {
    loadMap() {
      // 插件加载成功以后去绘制地图
      lazyAMapApiLoaderInstance.load().then(() => {
        // 指定地图容器，并做相应的配置
        this.map = new AMap.Map("amap", {
          center: [this.position[0], this.position[1]],// 地图中心点的经纬度位置配置
          zoom: this.zoom, // 地图缩放比例配置
        });
        this.addMarker();//标记点
        this.addCircle();//绘制圆
        let _this = this;
        this.map.on('click', (e) => { //添加点击事件,传入对象名，事件名，回调函数
          _this.map.clearMap();
          var lng = e.lnglat.lng;
          var lat = e.lnglat.lat;
          //根据经纬度获取地址信息
          let address = '';
          let geocoder = new AMap.Geocoder({radius: 1000, extensions: "all"});
          geocoder.getAddress([lng, lat], function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
              if (result.regeocode && result.regeocode.formattedAddress) {
                address = result.regeocode.formattedAddress;
              } else {
                console.error('获取地址失败');
              }
            }
          });

          //props 是只读的不能修改否则报错
          _this.position = [e.lnglat.lng, e.lnglat.lat];
          _this.$emit('getLocation', {lng, lat});
          _this.addMarker();//标记点
          _this.addCircle();//绘制圆
        })
      })
    },
    //标记点
    addMarker(e) {
      var imgUrl = require("@/assets/source/national.png"); // 标记定位的小图标
      var icon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(35, 35),
        // 图标的取图地址
        image: imgUrl,
        // 图标所用图片大小
        imageSize: new AMap.Size(35, 35),
      });
      // 标记的配置
      var marker = new AMap.Marker({
        map: this.map, // 使用此地图实例
        icon: icon,
        offset: new AMap.Pixel(-11,-35), //设置偏移量
        position: [this.position[0], this.position[1]], // 标记定位的小图标经纬度位置（一般标记定位的位置和地图中心点的位置要保持一致）
      });
      marker.setMap(this.map);
    },
    //绘制圆
    addCircle(e) {
      // 创建圆形circle
      var circle = new AMap.Circle({
        center: [this.position[0], this.position[1]],
        radius: this.radius, // 圆半径
        fillColor: '#5589C380',   // 圆形填充颜色
        strokeColor: '#5589C380', // 描边颜色
        strokeWeight: 1, // 描边宽度
        fillOpacity: 0.35 // 透明度
      });
      circle.setMap(this.map);
    },
    onSearchResult(pois) {
      let _this = this;
      if (pois.length > 0) {
        _this.position = [pois[0].lng, pois[0].lat]
        _this.map.clearMap();
        _this.addMarker();//标记点
        _this.addCircle();//绘制圆
        this.map.setCenter(_this.position)
      }
    },
  },
};
</script>
<style scoped>
::v-deep .el-vue-search-box-container{
  box-shadow: none;
  border:1px solid #777777;
}
.search-box {
  position: absolute;
}

::v-deep .amap-marker-label{
  border:1px solid #a9a9a9;
  padding:5px;
}
</style>
